<!DOCTYPE html>
<html lang="" xml:lang="">
<head>

  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>2.10 HTML 小组件 | Bookdown: 使用 R Markdown 创作书籍和技术文档</title>
  <meta name="description" content="这是一本使用 R Markdown 编写书籍的指南，包括如何生成图片和表格，以及如何在 R Markdown 中插入交叉引用、引文、HTML 组件和 Shiny 应用。本书能够导出为 HTML、PDF 和电子书（例如 EPUB）。本书的风格是可以定制的。你可以在 RStudio IDE 或其它编辑器中轻松地编辑和预览本书，并在你想要的任何地方（例如 bookdown.org）托管本书。" />
  <meta name="generator" content="bookdown 0.37 and GitBook 2.6.7" />

  <meta property="og:title" content="2.10 HTML 小组件 | Bookdown: 使用 R Markdown 创作书籍和技术文档" />
  <meta property="og:type" content="book" />
  <meta property="og:image" content="https://book.formlesslab.top/bookdown//images/cover.jpg" />
  <meta property="og:description" content="这是一本使用 R Markdown 编写书籍的指南，包括如何生成图片和表格，以及如何在 R Markdown 中插入交叉引用、引文、HTML 组件和 Shiny 应用。本书能够导出为 HTML、PDF 和电子书（例如 EPUB）。本书的风格是可以定制的。你可以在 RStudio IDE 或其它编辑器中轻松地编辑和预览本书，并在你想要的任何地方（例如 bookdown.org）托管本书。" />
  <meta name="github-repo" content="YuanchenZhu2020/bookdown-book-zh_CN" />

  <meta name="twitter:card" content="summary" />
  <meta name="twitter:title" content="2.10 HTML 小组件 | Bookdown: 使用 R Markdown 创作书籍和技术文档" />
  
  <meta name="twitter:description" content="这是一本使用 R Markdown 编写书籍的指南，包括如何生成图片和表格，以及如何在 R Markdown 中插入交叉引用、引文、HTML 组件和 Shiny 应用。本书能够导出为 HTML、PDF 和电子书（例如 EPUB）。本书的风格是可以定制的。你可以在 RStudio IDE 或其它编辑器中轻松地编辑和预览本书，并在你想要的任何地方（例如 bookdown.org）托管本书。" />
  <meta name="twitter:image" content="https://book.formlesslab.top/bookdown//images/cover.jpg" />

<meta name="author" content="Yihui Xie" />


<meta name="date" content="2024-12-22" />

  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  
  
<link rel="prev" href="latex-index.html"/>
<link rel="next" href="web-页面和-shiny-应用.html"/>
<script src="libs/jquery/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fuse.js@6.4.6/dist/fuse.min.js"></script>
<link href="libs/gitbook/css/style.css" rel="stylesheet" />
<link href="libs/gitbook/css/plugin-table.css" rel="stylesheet" />
<link href="libs/gitbook/css/plugin-bookdown.css" rel="stylesheet" />
<link href="libs/gitbook/css/plugin-highlight.css" rel="stylesheet" />
<link href="libs/gitbook/css/plugin-search.css" rel="stylesheet" />
<link href="libs/gitbook/css/plugin-fontsettings.css" rel="stylesheet" />
<link href="libs/gitbook/css/plugin-clipboard.css" rel="stylesheet" />








<link href="libs/anchor-sections/anchor-sections.css" rel="stylesheet" />
<link href="libs/anchor-sections/anchor-sections-hash.css" rel="stylesheet" />
<script src="libs/anchor-sections/anchor-sections.js"></script>
<script src="libs/htmlwidgets/htmlwidgets.js"></script>
<link href="libs/datatables-css/datatables-crosstalk.css" rel="stylesheet" />
<script src="libs/datatables-binding/datatables.js"></script>
<link href="libs/dt-core/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="libs/dt-core/css/jquery.dataTables.extra.css" rel="stylesheet" />
<script src="libs/dt-core/js/jquery.dataTables.min.js"></script>
<link href="libs/crosstalk/css/crosstalk.min.css" rel="stylesheet" />
<script src="libs/crosstalk/js/crosstalk.min.js"></script>


<style type="text/css">
pre > code.sourceCode { white-space: pre; position: relative; }
pre > code.sourceCode > span { line-height: 1.25; }
pre > code.sourceCode > span:empty { height: 1.2em; }
.sourceCode { overflow: visible; }
code.sourceCode > span { color: inherit; text-decoration: inherit; }
pre.sourceCode { margin: 0; }
@media screen {
div.sourceCode { overflow: auto; }
}
@media print {
pre > code.sourceCode { white-space: pre-wrap; }
pre > code.sourceCode > span { display: inline-block; text-indent: -5em; padding-left: 5em; }
}
pre.numberSource code
  { counter-reset: source-line 0; }
pre.numberSource code > span
  { position: relative; left: -4em; counter-increment: source-line; }
pre.numberSource code > span > a:first-child::before
  { content: counter(source-line);
    position: relative; left: -1em; text-align: right; vertical-align: baseline;
    border: none; display: inline-block;
    -webkit-touch-callout: none; -webkit-user-select: none;
    -khtml-user-select: none; -moz-user-select: none;
    -ms-user-select: none; user-select: none;
    padding: 0 4px; width: 4em;
    color: #aaaaaa;
  }
pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa;  padding-left: 4px; }
div.sourceCode
  {   }
@media screen {
pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
}
code span.al { color: #ff0000; font-weight: bold; } /* Alert */
code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
code span.at { color: #7d9029; } /* Attribute */
code span.bn { color: #40a070; } /* BaseN */
code span.bu { color: #008000; } /* BuiltIn */
code span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
code span.ch { color: #4070a0; } /* Char */
code span.cn { color: #880000; } /* Constant */
code span.co { color: #60a0b0; font-style: italic; } /* Comment */
code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
code span.do { color: #ba2121; font-style: italic; } /* Documentation */
code span.dt { color: #902000; } /* DataType */
code span.dv { color: #40a070; } /* DecVal */
code span.er { color: #ff0000; font-weight: bold; } /* Error */
code span.ex { } /* Extension */
code span.fl { color: #40a070; } /* Float */
code span.fu { color: #06287e; } /* Function */
code span.im { color: #008000; font-weight: bold; } /* Import */
code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
code span.kw { color: #007020; font-weight: bold; } /* Keyword */
code span.op { color: #666666; } /* Operator */
code span.ot { color: #007020; } /* Other */
code span.pp { color: #bc7a00; } /* Preprocessor */
code span.sc { color: #4070a0; } /* SpecialChar */
code span.ss { color: #bb6688; } /* SpecialString */
code span.st { color: #4070a0; } /* String */
code span.va { color: #19177c; } /* Variable */
code span.vs { color: #4070a0; } /* VerbatimString */
code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
</style>

<style type="text/css">
  
  div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
</style>
<style type="text/css">
/* Used with Pandoc 2.11+ new --citeproc when CSL is used */
div.csl-bib-body { }
div.csl-entry {
  clear: both;
  margin-bottom: 0em;
}
.hanging div.csl-entry {
  margin-left:2em;
  text-indent:-2em;
}
div.csl-left-margin {
  min-width:2em;
  float:left;
}
div.csl-right-inline {
  margin-left:2em;
  padding-left:1em;
}
div.csl-indent {
  margin-left: 2em;
}
</style>

<link rel="stylesheet" href="css/style.css" type="text/css" />
<link rel="stylesheet" href="css/extra_style.css" type="text/css" />
</head>

<body>



  <div class="book without-animation with-summary font-size-2 font-family-1" data-basepath=".">

    <div class="book-summary">
      <nav role="navigation">

<ul class="summary">
<li><a href="./">使用 R Markdown 创作书籍和技术文档</a></li>

<li class="divider"></li>
<li class="chapter" data-level="" data-path="index.html"><a href="index.html"><i class="fa fa-check"></i>翻译与排版说明</a>
<ul>
<li class="chapter" data-level="" data-path="翻译说明.html"><a href="翻译说明.html"><i class="fa fa-check"></i>翻译说明</a></li>
<li class="chapter" data-level="" data-path="排版说明.html"><a href="排版说明.html"><i class="fa fa-check"></i>排版说明</a></li>
<li class="chapter" data-level="" data-path="翻译进度.html"><a href="翻译进度.html"><i class="fa fa-check"></i>翻译进度</a></li>
</ul></li>
<li class="chapter" data-level="" data-path="前言.html"><a href="前言.html"><i class="fa fa-check"></i>前言</a>
<ul>
<li class="chapter" data-level="" data-path="为什么要阅读这本书.html"><a href="为什么要阅读这本书.html"><i class="fa fa-check"></i>为什么要阅读这本书</a></li>
<li class="chapter" data-level="" data-path="本书的结构.html"><a href="本书的结构.html"><i class="fa fa-check"></i>本书的结构</a></li>
<li class="chapter" data-level="" data-path="软件信息与一些约定.html"><a href="软件信息与一些约定.html"><i class="fa fa-check"></i>软件信息与一些约定</a></li>
<li class="chapter" data-level="" data-path="致谢.html"><a href="致谢.html"><i class="fa fa-check"></i>致谢</a></li>
</ul></li>
<li class="chapter" data-level="" data-path="关于作者.html"><a href="关于作者.html"><i class="fa fa-check"></i>关于作者</a></li>
<li class="chapter" data-level="1" data-path="introduction.html"><a href="introduction.html"><i class="fa fa-check"></i><b>1</b> 简介</a>
<ul>
<li class="chapter" data-level="1.1" data-path="开发动机.html"><a href="开发动机.html"><i class="fa fa-check"></i><b>1.1</b> 开发动机</a></li>
<li class="chapter" data-level="1.2" data-path="开始.html"><a href="开始.html"><i class="fa fa-check"></i><b>1.2</b> 开始</a></li>
<li class="chapter" data-level="1.3" data-path="usage.html"><a href="usage.html"><i class="fa fa-check"></i><b>1.3</b> 使用方法</a></li>
<li class="chapter" data-level="1.4" data-path="new-session.html"><a href="new-session.html"><i class="fa fa-check"></i><b>1.4</b> 两种呈现方法</a></li>
<li class="chapter" data-level="1.5" data-path="一些提示.html"><a href="一些提示.html"><i class="fa fa-check"></i><b>1.5</b> 一些提示</a></li>
</ul></li>
<li class="chapter" data-level="2" data-path="components.html"><a href="components.html"><i class="fa fa-check"></i><b>2</b> 组成部分</a>
<ul>
<li class="chapter" data-level="2.1" data-path="markdown-syntax.html"><a href="markdown-syntax.html"><i class="fa fa-check"></i><b>2.1</b> Markdown 语法</a>
<ul>
<li class="chapter" data-level="2.1.1" data-path="markdown-syntax.html"><a href="markdown-syntax.html#内联格式"><i class="fa fa-check"></i><b>2.1.1</b> 内联格式</a></li>
<li class="chapter" data-level="2.1.2" data-path="markdown-syntax.html"><a href="markdown-syntax.html#块级元素"><i class="fa fa-check"></i><b>2.1.2</b> 块级元素</a></li>
<li class="chapter" data-level="2.1.3" data-path="markdown-syntax.html"><a href="markdown-syntax.html#数学表达式"><i class="fa fa-check"></i><b>2.1.3</b> 数学表达式</a></li>
</ul></li>
<li class="chapter" data-level="2.2" data-path="bookdown-中的-markdown-功能拓展.html"><a href="bookdown-中的-markdown-功能拓展.html"><i class="fa fa-check"></i><b>2.2</b> Bookdown 中的 Markdown 功能拓展</a>
<ul>
<li class="chapter" data-level="2.2.1" data-path="bookdown-中的-markdown-功能拓展.html"><a href="bookdown-中的-markdown-功能拓展.html#equations"><i class="fa fa-check"></i><b>2.2.1</b> 方程编号与引用</a></li>
<li class="chapter" data-level="2.2.2" data-path="bookdown-中的-markdown-功能拓展.html"><a href="bookdown-中的-markdown-功能拓展.html#theorems"><i class="fa fa-check"></i><b>2.2.2</b> 定理与证明</a></li>
<li class="chapter" data-level="2.2.3" data-path="bookdown-中的-markdown-功能拓展.html"><a href="bookdown-中的-markdown-功能拓展.html#特殊的标题"><i class="fa fa-check"></i><b>2.2.3</b> 特殊的标题</a></li>
<li class="chapter" data-level="2.2.4" data-path="bookdown-中的-markdown-功能拓展.html"><a href="bookdown-中的-markdown-功能拓展.html#text-references"><i class="fa fa-check"></i><b>2.2.4</b> 文本引用</a></li>
</ul></li>
<li class="chapter" data-level="2.3" data-path="r-code.html"><a href="r-code.html"><i class="fa fa-check"></i><b>2.3</b> R 代码</a></li>
<li class="chapter" data-level="2.4" data-path="figures.html"><a href="figures.html"><i class="fa fa-check"></i><b>2.4</b> 图片</a></li>
<li class="chapter" data-level="2.5" data-path="tables.html"><a href="tables.html"><i class="fa fa-check"></i><b>2.5</b> 表格</a></li>
<li class="chapter" data-level="2.6" data-path="cross-references.html"><a href="cross-references.html"><i class="fa fa-check"></i><b>2.6</b> 交叉引用</a></li>
<li class="chapter" data-level="2.7" data-path="自定义区块.html"><a href="自定义区块.html"><i class="fa fa-check"></i><b>2.7</b> 自定义区块</a></li>
<li class="chapter" data-level="2.8" data-path="citations.html"><a href="citations.html"><i class="fa fa-check"></i><b>2.8</b> 引文</a></li>
<li class="chapter" data-level="2.9" data-path="latex-index.html"><a href="latex-index.html"><i class="fa fa-check"></i><b>2.9</b> 索引</a>
<ul>
<li class="chapter" data-level="2.9.1" data-path="latex-index.html"><a href="latex-index.html#插入索引条目"><i class="fa fa-check"></i><b>2.9.1</b> 插入索引条目</a></li>
<li class="chapter" data-level="2.9.2" data-path="latex-index.html"><a href="latex-index.html#构建索引"><i class="fa fa-check"></i><b>2.9.2</b> 构建索引</a></li>
</ul></li>
<li class="chapter" data-level="2.10" data-path="html-小组件.html"><a href="html-小组件.html"><i class="fa fa-check"></i><b>2.10</b> HTML 小组件</a></li>
<li class="chapter" data-level="2.11" data-path="web-页面和-shiny-应用.html"><a href="web-页面和-shiny-应用.html"><i class="fa fa-check"></i><b>2.11</b> Web 页面和 Shiny 应用</a></li>
</ul></li>
<li class="chapter" data-level="3" data-path="output-formats.html"><a href="output-formats.html"><i class="fa fa-check"></i><b>3</b> 输出格式</a>
<ul>
<li class="chapter" data-level="3.1" data-path="html.html"><a href="html.html"><i class="fa fa-check"></i><b>3.1</b> HTML</a>
<ul>
<li class="chapter" data-level="3.1.1" data-path="html.html"><a href="html.html#gitbook-style"><i class="fa fa-check"></i><b>3.1.1</b> GitBook 样式</a></li>
<li class="chapter" data-level="3.1.2" data-path="html.html"><a href="html.html#bs4-book"><i class="fa fa-check"></i><b>3.1.2</b> 三列 Bootstrap 样式</a></li>
<li class="chapter" data-level="3.1.3" data-path="html.html"><a href="html.html#bootstrap-style"><i class="fa fa-check"></i><b>3.1.3</b> 默认的 Bootstrap 样式</a></li>
<li class="chapter" data-level="3.1.4" data-path="html.html"><a href="html.html#tufte-style"><i class="fa fa-check"></i><b>3.1.4</b> Tufte 样式</a></li>
</ul></li>
<li class="chapter" data-level="3.2" data-path="latexpdf.html"><a href="latexpdf.html"><i class="fa fa-check"></i><b>3.2</b> LaTeX/PDF</a></li>
<li class="chapter" data-level="3.3" data-path="电子书.html"><a href="电子书.html"><i class="fa fa-check"></i><b>3.3</b> 电子书</a>
<ul>
<li class="chapter" data-level="3.3.1" data-path="电子书.html"><a href="电子书.html#epub"><i class="fa fa-check"></i><b>3.3.1</b> EPUB</a></li>
<li class="chapter" data-level="3.3.2" data-path="电子书.html"><a href="电子书.html#mobi"><i class="fa fa-check"></i><b>3.3.2</b> MOBI</a></li>
</ul></li>
<li class="chapter" data-level="3.4" data-path="a-single-document.html"><a href="a-single-document.html"><i class="fa fa-check"></i><b>3.4</b> 单个文档</a></li>
</ul></li>
<li class="chapter" data-level="4" data-path="customization.html"><a href="customization.html"><i class="fa fa-check"></i><b>4</b> 定制化</a>
<ul>
<li class="chapter" data-level="4.1" data-path="yaml-options.html"><a href="yaml-options.html"><i class="fa fa-check"></i><b>4.1</b> YAML 选项</a></li>
<li class="chapter" data-level="4.2" data-path="更换主题.html"><a href="更换主题.html"><i class="fa fa-check"></i><b>4.2</b> 更换主题</a></li>
<li class="chapter" data-level="4.3" data-path="模板.html"><a href="模板.html"><i class="fa fa-check"></i><b>4.3</b> 模板</a></li>
<li class="chapter" data-level="4.4" data-path="configuration.html"><a href="configuration.html"><i class="fa fa-check"></i><b>4.4</b> 配置</a></li>
<li class="chapter" data-level="4.5" data-path="internationalization.html"><a href="internationalization.html"><i class="fa fa-check"></i><b>4.5</b> 国际化</a></li>
</ul></li>
<li class="chapter" data-level="5" data-path="editing.html"><a href="editing.html"><i class="fa fa-check"></i><b>5</b> 编辑</a>
<ul>
<li class="chapter" data-level="5.1" data-path="build-the-book.html"><a href="build-the-book.html"><i class="fa fa-check"></i><b>5.1</b> 构建书籍</a></li>
<li class="chapter" data-level="5.2" data-path="预览单个章节.html"><a href="预览单个章节.html"><i class="fa fa-check"></i><b>5.2</b> 预览单个章节</a></li>
<li class="chapter" data-level="5.3" data-path="使用-http-服务预览书籍.html"><a href="使用-http-服务预览书籍.html"><i class="fa fa-check"></i><b>5.3</b> 使用 HTTP 服务预览书籍</a></li>
<li class="chapter" data-level="5.4" data-path="rstudio-ide.html"><a href="rstudio-ide.html"><i class="fa fa-check"></i><b>5.4</b> RStudio IDE</a></li>
<li class="chapter" data-level="5.5" data-path="collaboration.html"><a href="collaboration.html"><i class="fa fa-check"></i><b>5.5</b> 协同工作</a></li>
</ul></li>
<li class="chapter" data-level="6" data-path="publishing.html"><a href="publishing.html"><i class="fa fa-check"></i><b>6</b> 发布与出版</a>
<ul>
<li class="chapter" data-level="6.1" data-path="rstudio-connect.html"><a href="rstudio-connect.html"><i class="fa fa-check"></i><b>6.1</b> RStudio Connect</a></li>
<li class="chapter" data-level="6.2" data-path="netlify-drop.html"><a href="netlify-drop.html"><i class="fa fa-check"></i><b>6.2</b> Netlify Drop</a>
<ul>
<li class="chapter" data-level="6.2.1" data-path="netlify-drop.html"><a href="netlify-drop.html#构建和部署的工作流水线"><i class="fa fa-check"></i><b>6.2.1</b> 构建和部署的工作流水线</a></li>
<li class="chapter" data-level="6.2.2" data-path="netlify-drop.html"><a href="netlify-drop.html#开始之前"><i class="fa fa-check"></i><b>6.2.2</b> 开始之前</a></li>
<li class="chapter" data-level="6.2.3" data-path="netlify-drop.html"><a href="netlify-drop.html#构建书籍"><i class="fa fa-check"></i><b>6.2.3</b> 构建书籍</a></li>
<li class="chapter" data-level="6.2.4" data-path="netlify-drop.html"><a href="netlify-drop.html#部署网站"><i class="fa fa-check"></i><b>6.2.4</b> 部署网站</a></li>
<li class="chapter" data-level="6.2.5" data-path="netlify-drop.html"><a href="netlify-drop.html#可选更新站点"><i class="fa fa-check"></i><b>6.2.5</b> <em>可选：更新站点</em></a></li>
<li class="chapter" data-level="6.2.6" data-path="netlify-drop.html"><a href="netlify-drop.html#netlify-subdomain"><i class="fa fa-check"></i><b>6.2.6</b> <em>可选：更改默认子域名</em></a></li>
<li class="chapter" data-level="6.2.7" data-path="netlify-drop.html"><a href="netlify-drop.html#缺点和备选方案"><i class="fa fa-check"></i><b>6.2.7</b> 缺点和备选方案</a></li>
</ul></li>
<li class="chapter" data-level="6.3" data-path="github.html"><a href="github.html"><i class="fa fa-check"></i><b>6.3</b> GitHub</a></li>
<li class="chapter" data-level="6.4" data-path="html-发布功能.html"><a href="html-发布功能.html"><i class="fa fa-check"></i><b>6.4</b> HTML 发布功能</a>
<ul>
<li class="chapter" data-level="6.4.1" data-path="html-发布功能.html"><a href="html-发布功能.html#html-404"><i class="fa fa-check"></i><b>6.4.1</b> HTML 404 页面</a></li>
<li class="chapter" data-level="6.4.2" data-path="html-发布功能.html"><a href="html-发布功能.html#metadata-for-sharing"><i class="fa fa-check"></i><b>6.4.2</b> 用于共享的元数据</a></li>
</ul></li>
<li class="chapter" data-level="6.5" data-path="出版商.html"><a href="出版商.html"><i class="fa fa-check"></i><b>6.5</b> 出版商</a></li>
</ul></li>
<li class="appendix"><span><b>附录</b></span></li>
<li class="chapter" data-level="A" data-path="software-tools.html"><a href="software-tools.html"><i class="fa fa-check"></i><b>A</b> 软件工具</a>
<ul>
<li class="chapter" data-level="A.1" data-path="r-和-r-软件包.html"><a href="r-和-r-软件包.html"><i class="fa fa-check"></i><b>A.1</b> R 和 R 软件包</a></li>
<li class="chapter" data-level="A.2" data-path="pandoc.html"><a href="pandoc.html"><i class="fa fa-check"></i><b>A.2</b> Pandoc</a></li>
<li class="chapter" data-level="A.3" data-path="latex.html"><a href="latex.html"><i class="fa fa-check"></i><b>A.3</b> LaTeX</a></li>
</ul></li>
<li class="chapter" data-level="B" data-path="software-usage.html"><a href="software-usage.html"><i class="fa fa-check"></i><b>B</b> 软件使用</a>
<ul>
<li class="chapter" data-level="B.1" data-path="knitr.html"><a href="knitr.html"><i class="fa fa-check"></i><b>B.1</b> knitr</a></li>
<li class="chapter" data-level="B.2" data-path="r-markdown.html"><a href="r-markdown.html"><i class="fa fa-check"></i><b>B.2</b> R Markdown</a></li>
</ul></li>
<li class="chapter" data-level="C" data-path="常见问题.html"><a href="常见问题.html"><i class="fa fa-check"></i><b>C</b> 常见问题</a></li>
<li class="chapter" data-level="" data-path="参考文献.html"><a href="参考文献.html"><i class="fa fa-check"></i>参考文献</a></li>
<li class="divider"></li>
<li><a href="https://bookdown.org" target="_blank">本书由 bookdown 强力驱动</a></li>

</ul>

      </nav>
    </div>

    <div class="book-body">
      <div class="body-inner">
        <div class="book-header" role="navigation">
          <h1>
            <i class="fa fa-circle-o-notch fa-spin"></i><a href="./">Bookdown: 使用 R Markdown 创作书籍和技术文档</a>
          </h1>
        </div>

        <div class="page-wrapper" tabindex="-1" role="main">
          <div class="page-inner">

            <section class="normal" id="section-">
<div id="html-小组件" class="section level2 hasAnchor" number="2.10">
<h2><span class="header-section-number">2.10</span> HTML 小组件<a href="html-小组件.html#html-小组件" class="anchor-section" aria-label="Anchor link to header"></a></h2>
<p>尽管 R 的最大优势之一是数据可视化，但仍然有大量 JavaScript 库可用于更丰富的数据可视化。这些库可以被用来构建能够在 Web 浏览器中轻松呈现的可交互式应用，因此用户不必安装其它任何软件包就能够查看可视化效果。将这些 JavaScript 库引入 R 的一种方法是通过 <a href="http://htmlwidgets.org"><strong>htmlwidgets</strong></a> 软件包 <span class="citation">(<a href="#ref-R-htmlwidgets">Vaidyanathan et al. 2023</a>)</span>。</p>
<p>HTML 小组件能够呈现为独立的网页（就像 R plot 一样），或者嵌入 R Markdown 文档和 Shiny 应用中。它们最初仅被设计用于 HTML 输出，并且需要使用 JavaScript，因此它们不能用于非 HTML 输出格式，例如 LaTeX/PDF。在 <strong>knitr</strong> v1.13 之前，如果你试图在非 HTML 输出格式中呈现 HTML 小组件，你将会收到错误消息。从 <strong>knitr</strong> v1.13 开始，HTML 小组件将会自动被呈现为通过 <strong>webshot</strong> 软件包 <span class="citation">(<a href="#ref-R-webshot">Chang 2023</a>)</span> 截取的屏幕截图。当然，你需要安装有 <strong>webshot</strong> 软件包。另外，你必须安装 PhantomJS (<a href="http://phantomjs.org" class="uri">http://phantomjs.org</a>)，因为 <strong>webshot</strong> 使用它来捕捉屏幕截图。<strong>webshot</strong> 和 PhantomJS 都能够在 R 中自动安装：</p>
<div class="sourceCode" id="cb65"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb65-1"><a href="html-小组件.html#cb65-1" tabindex="-1"></a><span class="fu">install.packages</span>(<span class="st">&#39;webshot&#39;</span>)</span>
<span id="cb65-2"><a href="html-小组件.html#cb65-2" tabindex="-1"></a>webshot<span class="sc">::</span><span class="fu">install_phantomjs</span>()</span></code></pre></div>
<p>函数 <code>install_phantomjs()</code> 适用于 Windows、OS X 和 Linux。如果你熟悉修改系统环境变量 <code>PATH</code>，也可以选择自己下载和安装 PhantomJS。</p>
<p>当 <strong>knitr</strong> 在代码块中检测到 HTML 小组件对象时，它要么在当前输出格式为 HTML 时正常呈现小组件，要么在输出格式不是 HTML 时将小组件保存为 HTML 页面，并调用 <strong>webshot</strong> 来捕获 HTML 页面的屏幕图像。下面是从 <strong>DT</strong> 软件包 <span class="citation">(<a href="#ref-R-DT">Xie, Cheng, and Tan 2023</a>)</span> 创建的表格的示例：</p>
<div class="sourceCode" id="cb66"><pre class="sourceCode r"><code class="sourceCode r"><span id="cb66-1"><a href="html-小组件.html#cb66-1" tabindex="-1"></a>DT<span class="sc">::</span><span class="fu">datatable</span>(iris)</span></code></pre></div>
<div class="figure"><span style="display:block;" id="fig:DT-demo"></span>
<div class="datatables html-widget html-fill-item" id="htmlwidget-4085058335faaafac73e" style="width:100%;height:auto;"></div>
<script type="application/json" data-for="htmlwidget-4085058335faaafac73e">{"x":{"filter":"none","vertical":false,"data":[["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30","31","32","33","34","35","36","37","38","39","40","41","42","43","44","45","46","47","48","49","50","51","52","53","54","55","56","57","58","59","60","61","62","63","64","65","66","67","68","69","70","71","72","73","74","75","76","77","78","79","80","81","82","83","84","85","86","87","88","89","90","91","92","93","94","95","96","97","98","99","100","101","102","103","104","105","106","107","108","109","110","111","112","113","114","115","116","117","118","119","120","121","122","123","124","125","126","127","128","129","130","131","132","133","134","135","136","137","138","139","140","141","142","143","144","145","146","147","148","149","150"],[5.1,4.9,4.7,4.6,5,5.4,4.6,5,4.4,4.9,5.4,4.8,4.8,4.3,5.8,5.7,5.4,5.1,5.7,5.1,5.4,5.1,4.6,5.1,4.8,5,5,5.2,5.2,4.7,4.8,5.4,5.2,5.5,4.9,5,5.5,4.9,4.4,5.1,5,4.5,4.4,5,5.1,4.8,5.1,4.6,5.3,5,7,6.4,6.9,5.5,6.5,5.7,6.3,4.9,6.6,5.2,5,5.9,6,6.1,5.6,6.7,5.6,5.8,6.2,5.6,5.9,6.1,6.3,6.1,6.4,6.6,6.8,6.7,6,5.7,5.5,5.5,5.8,6,5.4,6,6.7,6.3,5.6,5.5,5.5,6.1,5.8,5,5.6,5.7,5.7,6.2,5.1,5.7,6.3,5.8,7.1,6.3,6.5,7.6,4.9,7.3,6.7,7.2,6.5,6.4,6.8,5.7,5.8,6.4,6.5,7.7,7.7,6,6.9,5.6,7.7,6.3,6.7,7.2,6.2,6.1,6.4,7.2,7.4,7.9,6.4,6.3,6.1,7.7,6.3,6.4,6,6.9,6.7,6.9,5.8,6.8,6.7,6.7,6.3,6.5,6.2,5.9],[3.5,3,3.2,3.1,3.6,3.9,3.4,3.4,2.9,3.1,3.7,3.4,3,3,4,4.4,3.9,3.5,3.8,3.8,3.4,3.7,3.6,3.3,3.4,3,3.4,3.5,3.4,3.2,3.1,3.4,4.1,4.2,3.1,3.2,3.5,3.6,3,3.4,3.5,2.3,3.2,3.5,3.8,3,3.8,3.2,3.7,3.3,3.2,3.2,3.1,2.3,2.8,2.8,3.3,2.4,2.9,2.7,2,3,2.2,2.9,2.9,3.1,3,2.7,2.2,2.5,3.2,2.8,2.5,2.8,2.9,3,2.8,3,2.9,2.6,2.4,2.4,2.7,2.7,3,3.4,3.1,2.3,3,2.5,2.6,3,2.6,2.3,2.7,3,2.9,2.9,2.5,2.8,3.3,2.7,3,2.9,3,3,2.5,2.9,2.5,3.6,3.2,2.7,3,2.5,2.8,3.2,3,3.8,2.6,2.2,3.2,2.8,2.8,2.7,3.3,3.2,2.8,3,2.8,3,2.8,3.8,2.8,2.8,2.6,3,3.4,3.1,3,3.1,3.1,3.1,2.7,3.2,3.3,3,2.5,3,3.4,3],[1.4,1.4,1.3,1.5,1.4,1.7,1.4,1.5,1.4,1.5,1.5,1.6,1.4,1.1,1.2,1.5,1.3,1.4,1.7,1.5,1.7,1.5,1,1.7,1.9,1.6,1.6,1.5,1.4,1.6,1.6,1.5,1.5,1.4,1.5,1.2,1.3,1.4,1.3,1.5,1.3,1.3,1.3,1.6,1.9,1.4,1.6,1.4,1.5,1.4,4.7,4.5,4.9,4,4.6,4.5,4.7,3.3,4.6,3.9,3.5,4.2,4,4.7,3.6,4.4,4.5,4.1,4.5,3.9,4.8,4,4.9,4.7,4.3,4.4,4.8,5,4.5,3.5,3.8,3.7,3.9,5.1,4.5,4.5,4.7,4.4,4.1,4,4.4,4.6,4,3.3,4.2,4.2,4.2,4.3,3,4.1,6,5.1,5.9,5.6,5.8,6.6,4.5,6.3,5.8,6.1,5.1,5.3,5.5,5,5.1,5.3,5.5,6.7,6.9,5,5.7,4.9,6.7,4.9,5.7,6,4.8,4.9,5.6,5.8,6.1,6.4,5.6,5.1,5.6,6.1,5.6,5.5,4.8,5.4,5.6,5.1,5.1,5.9,5.7,5.2,5,5.2,5.4,5.1],[0.2,0.2,0.2,0.2,0.2,0.4,0.3,0.2,0.2,0.1,0.2,0.2,0.1,0.1,0.2,0.4,0.4,0.3,0.3,0.3,0.2,0.4,0.2,0.5,0.2,0.2,0.4,0.2,0.2,0.2,0.2,0.4,0.1,0.2,0.2,0.2,0.2,0.1,0.2,0.2,0.3,0.3,0.2,0.6,0.4,0.3,0.2,0.2,0.2,0.2,1.4,1.5,1.5,1.3,1.5,1.3,1.6,1,1.3,1.4,1,1.5,1,1.4,1.3,1.4,1.5,1,1.5,1.1,1.8,1.3,1.5,1.2,1.3,1.4,1.4,1.7,1.5,1,1.1,1,1.2,1.6,1.5,1.6,1.5,1.3,1.3,1.3,1.2,1.4,1.2,1,1.3,1.2,1.3,1.3,1.1,1.3,2.5,1.9,2.1,1.8,2.2,2.1,1.7,1.8,1.8,2.5,2,1.9,2.1,2,2.4,2.3,1.8,2.2,2.3,1.5,2.3,2,2,1.8,2.1,1.8,1.8,1.8,2.1,1.6,1.9,2,2.2,1.5,1.4,2.3,2.4,1.8,1.8,2.1,2.4,2.3,1.9,2.3,2.5,2.3,1.9,2,2.3,1.8],["setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","setosa","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","versicolor","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica","virginica"]],"container":"<table class=\"display\">\n  <thead>\n    <tr>\n      <th> <\/th>\n      <th>Sepal.Length<\/th>\n      <th>Sepal.Width<\/th>\n      <th>Petal.Length<\/th>\n      <th>Petal.Width<\/th>\n      <th>Species<\/th>\n    <\/tr>\n  <\/thead>\n<\/table>","options":{"columnDefs":[{"className":"dt-right","targets":[1,2,3,4]},{"orderable":false,"targets":0},{"name":" ","targets":0},{"name":"Sepal.Length","targets":1},{"name":"Sepal.Width","targets":2},{"name":"Petal.Length","targets":3},{"name":"Petal.Width","targets":4},{"name":"Species","targets":5}],"order":[],"autoWidth":false,"orderClasses":false},"selection":{"mode":"multiple","selected":null,"target":"row","selectable":null}},"evals":[],"jsHooks":[]}</script>
<p class="caption">
图 2.5: A table widget rendered via the DT package.
</p>
</div>
<p>如果你现在以网页的形式阅读本书，应该能看到由上述代码块生成的交互式表格：你可以对列进行排序并在表格中进行搜索。如果你正在阅读本书的非 HTML 版本，应该能看到这个表格的屏幕截图。由于真实的 Web 浏览器和 PhantomJS 的虚拟浏览器之间的差异，屏幕截图可能与 Web 浏览器中呈现的实际小组件略有不同。</p>
<p>有许多与屏幕捕获相关的 <strong>knitr</strong> 区块选项。第一，如果你对自动截图的质量不满意，或者想要一个特定状态的小组件的屏幕截图（例如在你单击并排序表的某一列之后），可以手动捕获屏幕图像，并通过区块选项 <code>screenshot.alt</code>（备选屏幕截图 (alternative screenshots)）提供自己的屏幕截图。该选项使用图像的路径获得图片。如果一个区块中有多个小组件，则可以提供一个图像路径的向量。当该选项存在时，<strong>knitr</strong> 将不再调用 <strong>webshot</strong> 自动截图。</p>
<p>第二，有时你可能希望强制 <strong>knitr</strong> 使用静态屏幕截图，而不是在 HTML 页面上呈现实际的小组件。在这种情况下，你可以设置区块选项 <code>screenshot.force = TRUE</code>。小组件将始终呈现为静态图像。请注意，你仍然可以选择使用自动或自定义的屏幕截图。</p>
<p>第三，<strong>webshot</strong> 有一些控制自动屏幕截图的选项，你可以通过区块选项 <code>screenshot.opts</code> 来进行设置，该选项接收一个类似 <code>list(delay = 2, cliprect = 'viewport')</code> 的列表。有关可用选项的完整列表，请查阅帮助页面 <a href="https://wch.github.io/webshot/reference/webshot.html"><code>?webshot::webshot</code></a>，而其中一些选项的效果说明请见<a href="https://wch.github.io/web/packages/webshot/articles/intro.html">软件包介绍</a>。这里的 <code>delay</code> 选项对于需要很长时间进行渲染的小组件来说很重要：<code>delay</code> 指定了 PhantomJS 在截图前等待的秒数。如果看到不完整的屏幕截图，可能需要指定更长的延迟时间（默认值为 0.2 秒）。</p>
<p>第四，如果你觉得捕获屏幕截图很慢，或者不想每次执行代码块时都这样做，可以使用区块选项 <code>cache = TRUE</code> 来缓存区块。缓存对于 HTML 和非 HTML 输出格式都适用。</p>
<p>屏幕截图的表现类似于普通的 R plot，因为许多与图形相关的区块选项也适用于屏幕截图，包括 <code>fig.width</code>、<code>fig.height</code>、<code>out.width</code>、<code>fig.cap</code> 等。因此你可以在输出文档中指定屏幕截图的大小，并为其指定图片标题。可以通过区块选项 <code>dev</code> 指定自动截图的图片格式，可能的值为 <code>pdf</code>、<code>png</code> 和 <code>jpeg</code>。PDF 输出的默认值为 <code>pdf</code>，其他类型输出的默认值为 <code>png</code>。请注意，<code>pdf</code> 可能不如 <code>png</code> 那样可靠：有时 HTML 页面上的某些元素无法呈现到 PDF 屏幕截图中，因此你甚至可能希望在 PDF 输出中使用 <code>dev = 'png'</code>。不过能否正常使用取决于 HTML 小部件的具体情况，在确定哪种格式更加合适之前，你可以对 <code>pdf</code> 和 <code>png</code>（或 <code>jpeg</code>）都加以尝试。</p>
</div>
<h3>参考文献<a href="参考文献.html#参考文献" class="anchor-section" aria-label="Anchor link to header"></a></h3>
<div id="refs" class="references csl-bib-body hanging-indent" entry-spacing="0">
<div id="ref-R-webshot" class="csl-entry">
Chang, Winston. 2023. <em>Webshot: Take Screenshots of Web Pages</em>. <a href="https://wch.github.io/webshot/">https://wch.github.io/webshot/</a>.
</div>
<div id="ref-R-htmlwidgets" class="csl-entry">
Vaidyanathan, Ramnath, Yihui Xie, JJ Allaire, Joe Cheng, Carson Sievert, and Kenton Russell. 2023. <em>Htmlwidgets: HTML Widgets for r</em>. <a href="https://github.com/ramnathv/htmlwidgets">https://github.com/ramnathv/htmlwidgets</a>.
</div>
<div id="ref-R-DT" class="csl-entry">
Xie, Yihui, Joe Cheng, and Xianying Tan. 2023. <em>DT: A Wrapper of the JavaScript Library DataTables</em>. <a href="https://github.com/rstudio/DT">https://github.com/rstudio/DT</a>.
</div>
</div>
            </section>

          </div>
        </div>
      </div>
<a href="latex-index.html" class="navigation navigation-prev " aria-label="Previous page"><i class="fa fa-angle-left"></i></a>
<a href="web-页面和-shiny-应用.html" class="navigation navigation-next " aria-label="Next page"><i class="fa fa-angle-right"></i></a>
    </div>
  </div>
<script src="libs/gitbook/js/app.min.js"></script>
<script src="libs/gitbook/js/clipboard.min.js"></script>
<script src="libs/gitbook/js/plugin-search.js"></script>
<script src="libs/gitbook/js/plugin-sharing.js"></script>
<script src="libs/gitbook/js/plugin-fontsettings.js"></script>
<script src="libs/gitbook/js/plugin-bookdown.js"></script>
<script src="libs/gitbook/js/jquery.highlight.js"></script>
<script src="libs/gitbook/js/plugin-clipboard.js"></script>
<script>
gitbook.require(["gitbook"], function(gitbook) {
gitbook.start({
"sharing": {
"github": true,
"facebook": false,
"twitter": true,
"linkedin": false,
"weibo": false,
"instapaper": false,
"vk": false,
"whatsapp": false,
"all": ["facebook", "twitter", "linkedin", "weibo", "instapaper"]
},
"fontsettings": {
"theme": "white",
"family": "sans",
"size": 2
},
"edit": {
"link": "https://github.com/YuanchenZhu2020/bookdown-book-zhCN/edit/main/02-components.Rmd",
"text": "编辑"
},
"history": {
"link": null,
"text": null
},
"view": {
"link": null,
"text": null
},
"download": ["bookdown-book-zhCN.pdf", "bookdown-book-zhCN.epub", "bookdown-book-zhCN.mobi"],
"search": {
"engine": "fuse",
"options": null
},
"toc": {
"collapse": "none"
}
});
});
</script>

<!-- dynamically load mathjax for compatibility with self-contained -->
<script>
  (function () {
    var script = document.createElement("script");
    script.type = "text/javascript";
    var src = "true";
    if (src === "" || src === "true") src = "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.9/latest.js?config=TeX-MML-AM_CHTML";
    if (location.protocol !== "file:")
      if (/^https?:/.test(src))
        src = src.replace(/^https?:/, '');
    script.src = src;
    document.getElementsByTagName("head")[0].appendChild(script);
  })();
</script>
</body>

</html>
